<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<nav>
    <div class="nav-inner">
        <div class="container">
            <h2>赵鑫蕊</h2>
            <p>主要任务：web前端学习</p>
        </div>
    </div>
</nav>
<header>
    <div class="container">
        <div class="row">
            <ul class="ul-1 clearfix">
                <li><a href="">首页</a></li>
                <li><a href="">关于我</a></li>
                <li><a href="">技能</a></li>
                <li><a href="">作品</a></li>
                <li><a href="">经历</a></li>
                <li><a href="">联系我</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="main-1">
        <div class="container">
            <h1>简介</h1>
            <p>对自己的一个小介绍</p>
            <div class="row">
                <div class="col-md-8">
                    <h5>赵鑫蕊</h5>
                    <p>现就读于泊头职业学院web前端开发利用HTML5/CSS3技术进行产品的界面开发和简单的界面效果
                        使用JavaScript实现网站中的简单功能及效果jquery和bootstrap主要是运用在pc端和手机web
                        自己写布局没问题，都能写到全浏览器兼容；还没真正的写过后台程序. 微信开发PC端的用户
                        左边是我的个人微信，扫一扫可以关注，移动端的用户下面是我的个人微信，扫一扫可以关注
                        。下面有附加我个人的一部分作品,谢谢观看</p>
                </div>
                <div class="col-md-4"><img src="img/img-2.jpg" alt=""></div>
            </div>
        </div>
    </div>
    <div class="main-2">
        <div class="container">
            <h1>专业技能</h1>
            <p>给自己技能的一个评分</p>
            <div class="row">
                <div class="col-md-4">
                     <!--<span class="chart skilBg" data-percent="70"> <span class="percent"></span> </span>-->
                    <img src="img/img-3.png" alt="">
                </div>
                <div class="col-md-4">
                    <img src="img/img-4.png" alt="">
                </div>
                <div class="col-md-4">
                    <img src="img/img-5.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="main-3">
        <h1>个人作品</h1>
        <p>展示不同风格的作品</p>
        <div class="container">
            <ul class="one">
                <li class="active">网页</li>
                <li class="one-1">响应式</li>
            </ul>
        </div>
        <div class="two">
            <div class="active">
                <div class="main-3-1">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-3">
                                <img src="img/img-6.png" alt="">
                            </div>
                            <div class="col-md-3">
                                <img src="img/img-7.png" alt="">
                            </div>
                            <div class="col-md-3">
                                <img src="img/img-8.png" alt="">
                            </div>
                            <div class="col-md-3">
                                <img src="img/img-9.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-3-2">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-3">
                                <img src="img/img-10.png" alt="">
                            </div>
                            <div class="col-md-3">
                                <img src="img/img-11.png" alt="">
                            </div>
                            <div class="col-md-3">
                                <img src="img/img-12.png" alt="">
                            </div>
                            <div class="col-md-3">
                                <img src="img/img-13.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-3-3">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-3">
                                <img src="img/img-14.png" alt="">
                            </div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="main-3-2">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-3">
                                <img src="img/img-22.png" alt="">
                            </div>
                            <div class="col-md-3">
                                <img src="img/img-24.png" alt="">
                            </div>
                            <div class="col-md-3">
                                <img src="img/img-25.png" alt="">
                            </div>
                            <div class="col-md-3">
                                <img src="img/img-26.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-3-3">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-3">
                                <img src="img/img-27.png" alt="">
                            </div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main-4">
        <h1>学校</h1>
        <p>现在就读学校</p>
        <div class="main-4-1">
            <div class="container">
                <div class="row">
                    <div class="col-md-2">
                        <div class="tu">2018-2019</div>
                    </div>
                    <div class="col-md-10">
                        <h5>泊头职业学院</h5>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main-5">
        <div class="container">
            <h1>谢谢你的耐心观看</h1>
            <p>下面是我的联系方式,你也可以通过下面的发送邮件给我与我联系.</p>
        </div>
    </div>
    <div class="xian"></div>
</main>
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <h4>我的联系方式</h4>
                <div class="row">
                    <div class="col-md-6">
                        <p><img src="img/img-17.png" alt="">河北省张家口市</p>
                        <p><img src="img/img-18.png" alt=""> +8618680582923</p>
                    </div>
                    <div class="col-md-6">
                        <p><img src="img/img-19.png" alt="">349600481@qq.com</p>
                        <p><img src="img/img-20.png" alt=""> www.yacstudio.com</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <img src="img/img-21.png" alt="">
            </div>
        </div>
    </div>
</footer>
<!--<canvas id="c_n3" width="1600" height="490" style="position: fixed;top: 0;/* pointer-events: none; */left: 0;right:0;z-index: 999;opacity: 0.9;"></canvas>-->
</body>
<script src="js/script.js"></script>
<script src="js/canvas-nest.min.js"></script>

</html>